<script setup>

import {ElButton, ElCol, ElRow} from "element-plus";
</script>

<template>
  <div class=card-container>
  <el-card
  class ="vertical-buttons-card"
  >
    <div class="button-with-text">
      <span class="button-text">零维模型</span>
      <el-button class="custom-button">零维模型是最简单的水环境模型，它不考虑空间上的变化，将整个研究区域视为一个没有空间差异的点或整体，只关注随时间的变化。这种模型通常用于快速估算或描述水质参数随时间的变化趋势，忽略流动和扩散效应。它假设系统内的混合是均匀且瞬间完成的，因此重点关注水质组分的质量守恒方程，如质量平衡方程。</el-button>
    </div>
    <div class="button-with-text">
      <span class="button-text">一维模型</span>
      <el-button class="custom-button">一维模型考虑了空间的一个方向上的变化，通常用于描述沿河流、渠道或管道等线性水体的水质变化。它假设污染物的浓度只在一个维度（通常是流体流动的方向）上变化，而垂直于流动方向的扩散可以忽略或通过横向混合系数来近似。一维模型主要基于质量和能量守恒原理，结合水流动力学和水质反应动力学建立偏微分方程，解这些方程可以得到水质随时间和空间的变化。</el-button>
    </div>
    <div class="button-with-text">
      <span class="button-text">二维模型</span>
      <el-button class="custom-button">二维模型考虑了空间两个方向（通常是水平面的x和y方向）上的变化，适用于研究开阔水域（如湖泊、海湾、河口等）的水质分布，其中污染物的扩散和输移不仅沿着水流方向，还在垂直水流方向上发生。二维模型综合了流体动力学（如二维流场的计算）和水质动力学（考虑污染物的输移、扩散和转化），通常采用数值方法求解纳维-斯托克斯方程和质量传输方程。</el-button>
    </div>
    <!-- 确认按钮 -->
    <el-row>
      <el-col :span="24" class="button-row">
        <el-button type="primary" @click="onConfirm" style="width: 45%;">选用</el-button>
        <el-button type="primary" @click="onClose" style="width: 45%;">关闭</el-button>
      </el-col>
    </el-row>
  </el-card>
  </div>

</template>

<style scoped>

.vertical-buttons-card {
  /* 使用Flex布局，并设置为垂直排列 */
  display: flex;
  max-width: 500px;
  align-items: stretch; /* 让卡片内容区域填满卡片宽度 */
  justify-content: center;
  background-image: linear-gradient(135deg, #ffffff 0%, #f1f5fc 100%);
  border-radius: 10px;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 10px;

}

.custom-button {
  /* 设置按钮高度为100px */
  height: 100px;
  /* 确保按钮内的文本垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 根据需要调整字体大小、颜色等 */
  font-size: 12px;
  /* 允许文本换行 */
  white-space: normal;
  /* 设置文本对齐方式，可根据需要调整 */
  text-align: left;
  /* 为了保持按钮的外观，可能需要调整高度或宽度 */
  min-height: 48px; /* 示例高度，按需调整 */
  /* 可选：为适应多行文本，可以移除按钮的内边距和外边框样式 */
  border: none;
  /* 如果需要保持按钮的外观，可以重新定义边框和背景样式 */
  background-color: inherit;
  color: inherit;
  cursor: pointer;
  width: auto; /* 调整宽度为自动，以便适应内容 */
  padding: 10px 16px; /* 重新设定内边距 */
  border-radius: 6px; /* 给按钮添加圆角 */
  overflow-wrap: break-word; /* 改善长单词换行 */

}
.custom-button:hover {
  /* 示例：鼠标悬停时的背景颜色改变 */
  background-color: rgba(0, 0, 0, 0.1);
}
.button-with-text {
  display: flex;
  align-items: center; /* 文字与按钮垂直居中 */
  gap: 20px; /* 文字与按钮之间的间距 */
  background-color: #f1f5fc;
  margin-bottom: 5px;
  border-radius: 5px; /* 上左、上右、下右、下左圆角大小 */
}
.button-text {
  /* 可以根据需要调整描述文字的样式 */
  font-size: 14px;
  width: 100px;
  color: #1d1c1c;
  font-weight: bold; /* 加粗描述文字，提高可读性 */
}

.el-button--primary {
  background-image: linear-gradient(45deg, #abc2df 0%, #93a9ce 100%);
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 6px;
  height: 48px;
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  background-position: right bottom;
  transform: translateY(-2px); /* 鼠标悬停时的微小上移效果 */
}

.button-row {
  text-align: center;
  margin-top: 30px;
}
.custom-button span {
  display: inline-block;
  width: 100%;
  word-break: break-word;
}
</style>